<template>
	<view class="wrap yjfk-form-right">
		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode="widthFix"></image>

	<!-- 	<u-sticky :bg-color="bgColor">
			
			<view class="sticky">
				<headers :enable="enable" title="商务合作" />
			</view>
		</u-sticky> -->



		<view class="form">
			<u-form :model="model" :rules="rules" ref="uForm" label-position="top">

				<u-form-item :border-bottom="false" label="手机号" prop="contact">
					<view class="box box1">
						<u-input class="input-left-form" placeholder="请输入您的手机号" v-model="model.contact" type="text"
							maxlength="200"></u-input>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label="微信号" prop="wxcode">
					<view class="box box1">
						<u-input class="input-left-form" placeholder="请输入您的微信号" v-model="model.wxcode" type="text"
							maxlength="200"></u-input>
					</view>
				</u-form-item>


				<u-form-item :border-bottom="false" label="合作内容" prop="content">
					<view class="box">
						<u-input type="textarea" placeholder="请填写合作内容" v-model="model.content" height="300"
							maxlength="5000" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" label="上传图片（选填）0/4">
					<u-upload multiple maxCount="4" ref="uUpload" :show-progress="false"
						action="https://hegui.kaisenbaoxian.com/personnelManage/file/uploadImg" :auto-upload="true"
						:file-list="fileList1">
					</u-upload>
				</u-form-item>



			</u-form>
			<view class="u-m-t-80 u-m-b-40">
				<u-button shape="circle" type="primary" @click="submit">提交申请</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import headers from '@/components/headnavbar/index.vue'
	export default {
		// onPageScroll(e) {
		// 	this.bgColor = e.scrollTop > 30 ? 'rgba(255,255,255,0.9)' : ''
		// },
		components: {
			headers
		},
		data() {

			return {
				bgColor:'rgba(255,255,255,0.9)',
				enable: false,
				fileList1: [],
				model: {

					content: '',
					contact: '',
					wxcode: ''
				},
				rules: {
					contact: [{
						required: true,
						message: '请输入您的手机号',
						trigger: ['change', 'blur'],
					}],
					wxcode: [{
						required: true,
						message: '请输入您的微信号',
						trigger: ['change', 'blur'],
					}],

					content: [{
						required: true,
						min: 10,
						max: 500,
						message: '请填写合作内容',
						trigger: ['change', 'blur'],
					}],
				}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			// 获取设备信息
			uni.getSystemInfo({
				success: res => {
					this.model.deviceInfo = JSON.stringify(res);
				}
			});
		},
		methods: {
			submit() {
				// console.log(this.model)
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.commentSave(this.model).then(res => {
							uni.showModal({
								title: '提示',
								content: res.message,
								showCancel: false,
								success: function() {
									if (res.result == 'true') {
										uni.navigateBack();
									}
								}
							});
						});
					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.sticky{
		padding-top: 30px;
	}
	.input-placeholder {
		text-align: right;
	}

	.form{
		// min-height: 130vh;
		padding-bottom: 20px;
	}
	.box {
		background: #fff;
		width: 100%;
		padding: 22rpx 31rpx;
		border-radius: 13rpx;
	}

	.box1 {
		padding: 10rpx 31rpx;
	}

	/deep/ .u-input,
	/deep/ .u-list-item {
		background: #fff !important;

	}
</style>
